<template>
  <div class="head d-flex flex-column">
    <div class="title">我的服务</div>
    <div class="container">
      <div class="row justify-content-between">
        <div class="box" @click="goPostList">
          <div class="img">
            <img src="../../assets/post.png" alt="" srcset="" />
          </div>
          <div>我的帖子</div>
        </div>
        <!-- <div class="box">
          <div class="img"><img src="../../assets/star.png" alt="" srcset=""></div>
          <div>我的点赞</div>
        </div> -->
        <div class="box" @click="goFans">
          <div  class="img"><img src="../../assets/watch.png" alt="" srcset=""></div>
          <div>我的关注</div>
        </div>
        <div class="box" @click="goFans">
          <div class="img"><img src="../../assets/fans.png" alt="" srcset=""></div>
          <div>我的粉丝</div>
        </div>
      </div>
      <div class="row d-flex justify-content-between">
        <div class="box">
          <div class="img">
            <img src="../../assets/kefu.png" alt="" srcset="" />
          </div>
          <div>我的客服</div>
        </div>

        <div class="box">
          <div  class="img"><img src="../../assets/zhuye.png" alt="" srcset=""></div>
          <div>我的主页</div>
        </div>
        <div class="box">
          <div class="img"><img src="../../assets/message.png" alt="" srcset=""></div>
          <div>我的消息</div>
        </div>
      </div>
      <div class="row d-flex justify-content-between">
        <!-- <div class="box">
          <div class="img">
            <img src="../../assets/post.png" alt="" srcset="" />
          </div>
          <div>我的帖子</div>
        </div> -->

        <div class="box">
          <div  class="img"><img src="../../assets/touxiang-fang.jpeg" alt="" srcset=""></div>
          <div>感谢使用</div>
        </div>
        <!-- <div class="box">
          <div class="img"><img src="../../assets/fans.png" alt="" srcset=""></div>
          <div>我的粉丝</div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useLocalStorage } from '@/utils/useLocalStorage'
import { useRouter } from 'vue-router';
const router = useRouter()

const goPostList = () => {
  router.push(`postlistlayout?userId=${localStorage.getItem('userInfo')?  JSON.parse(useLocalStorage.get('userInfo')).id :''}`)
}
const goFans = () => {
  router.push(`Message?userId=${localStorage.getItem('userInfo')?  JSON.parse(useLocalStorage.get('userInfo')).id :''}`)
}
const goWatch = () => {}
</script>

<style scoped lang="scss">
.head {
  line-height: 15vw;
  width: 100vw;
  // border: 1px solid #aaa;
  // overflow: hidden;
  .title {
    // border: 1px solid #aaa;
    padding-left: 8vw;
    font-size: 0.4rem;
    color: black;
  }
  .container {
    // border: 1px solid black;
    width: 100%;

    .row {

      // border: 1px solid #aaa;
      height: 20vw;
      font-size: 4vw;
      color: black;
      display: flex;
      justify-content: space-around;
      .box {
        // display: flex;
        flex-direction: row;
        width: 20%;
        height: 100%;
        // border: 1px solid black;
        justify-content: space-around;
        .img {
            height: 65%;
            // width: 50%;
            img{
              height:  100%;
            }
          }
        div {
          color: #666;
          display: flex;
          flex-direction: column;
          height: 35%;
          // border: 1px solid black;
          align-items: center;
          justify-content: center;
        
        }
      }
    }
  }
}
</style>
